<template>
	<view class="content">
		<message ref="Message"></message>
		<!-- 头部 -->
		<view class="header" id="header">
			<!-- 顶部状态栏 -->
			<view class="statusBar" :style="{ height: statusBarHeight + 'PX'}"></view>
			<!-- 搜索容器 -->
			<view class="serachview">
				<view class="back" @click="backClick">
					<image src="../../static/images/back.png" mode=""></image>
				</view>
				<view class="search">
					<vide class="iconfont icon-sousuo"></vide>
					<input type="text" value="" placeholder="点我搜索哦!" placeholder-class="place" confirm-type="search" confirm-hold @confirm="searchClick"
						v-model="searchContent" 
					/>
				</view>
				<view class="record" @tap="searchClick">
					<text>搜索</text>
				</view>
			</view>
		</view>
		
		<!-- 历史搜索记录 -->
		<view class="history" v-show="videoData.length === 0">
			<view class="historyTitle">
				<text>搜索记录</text>
				<view class="delImg" @click="delClick">
					<image src="../../static/images/del.png" mode=""></image>
				</view>
			</view>
			<view class="historyItem">
				<view class="item" v-for="(item, index) in historyStorage" @click="historyItemClick(item)">
					{{ item }}
				</view>
				
			</view>
		</view>
		<aui-loading
		  :show="auiLoading.show" 
		  :type="auiLoading.type" 
		  :direction="auiLoading.row" 
		  :msg="auiLoading.msg" 
		  :mask="auiLoading.mask"
		  :theme="auiLoading.theme"
		  ref="auiLoading"
		></aui-loading>
		<view class="videoContent" v-if="videoData.length !== 0">
			<scroll-view :scroll-y="true" :style="{ height: videoContentHeight + 'px'}" 
				scroll-with-animation
				@scrolltolower="handleToLower" 
				:scroll-into-view="'scroll-' + scrollTop"
				:scroll-top="scrollTop"
				 @scroll="scroll" 
				>
				<view class="item" v-for="(item, index) in videoData" :key="index"
					@click="videoItemClick(item)"
					:id="'scroll-' + index"
					
				>
					<view class="img">
						<image :src="item.vod_pic" mode=""></image>
					</view>
					<view class="itemcontent" id="itemcontent">
						<text class="h1">{{ item.vod_name }}</text>
						<text class="txt"> {{ item.vod_year }} </text>
						<view class="classify">
							<scroll-view scroll-x style="white-space: nowrap;" :style="{ width: classifyWith + 'px'}">
								<text v-for="(vod_class, index) in item.vod_class.split(',')" :key="index">{{ vod_class }}</text>
							</scroll-view>
						</view>
						<text class="vod_blurb">{{ item.vod_blurb }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
	</view>
</template>

<script>
	import { select } from '@/commons/querySelect.js'
	import auiLoading from '@/components/aui-loading/aui-loading.vue'
	export default {
		data() {
			return {
				// 状态栏高度
				statusBarHeight: this.$systemInfo.statusBarHeight,
				videoContentHeight: 0,
				historyStorage: [],
				searchContent: '',
				videoData: [],
				classifyWith: 0,
				params: {
					// 要获取几条
					limit: 20,
					// 排序
					sort: 'desc',
					// 要跳过几条
					skip: 0,
				},
				// 是否还有下一页
				hasMore: true,
				temporary: '',
				scrollTop: 0,
				
				auiLoading: {
				    show: false,
				    type: 3,
				    direction: 'col',
				    msg: 'Loading...',
				    mask: false,
					theme: 1
				},
				old: {
					scrollTop: 0
				},
				scrollTop: 0,
				clickTimeNum: 0
			};
		},
		onLoad() {
			// 读取存储中的搜索历史记录
			if (uni.getStorageSync('history')) {
				this.historyStorage = uni.getStorageSync('history') || []
			}
			
			
		},
		async mounted() {
			const header = await select('#header')
			
			
			this.videoContentHeight = this.$systemInfo.windowHeight - (header.height + 10)
			this.classifyWith = this.$systemInfo.windowWidth - uni.upx2px(280) 
		},
		onHide() {
			if (this.historyStorage.length === 0) return 
			this.setHistryStorage()
		},
		onBackPress() {
			if (this.videoData.length !== 0) {
				this.temporary = ''
				this.videoData = []
				this.params = {
					// 要获取几条
					limit: 20,
					// 排序
					sort: 'desc',
					// 要跳过几条
					skip: 0,
				},
				this.hasMore = true
				return true
			}
			
			this.setHistryStorage()
			
			
		},
		methods: {
			async searchClick() {
				if (!this.searchContent || this.searchContent == this.temporary) {
					console.log('不允许')
					return 
				} 
				
				this.videoData = []
				this.temporary = this.searchContent
				this.historyStorage = this.formateHistoryData(this.historyStorage, this.searchContent)
				
				this.getvideoDataList()
				this.backToTheTop()
			},
			// 返回
			backClick() {
				if (this.videoData.length !== 0) {
					this.temporary = ''
					this.videoData = []
					this.params = {
						// 要获取几条
						limit: 20,
						// 排序
						sort: 'desc',
						// 要跳过几条
						skip: 0,
					},
					this.hasMore = true
					return 
				} 
				this.setHistryStorage()
				uni.navigateBack()
				
			},
			// 格式化历史记录
			formateHistoryData(arr, string) {
				let index = arr.indexOf(string)
				if (index > -1) {
					arr.splice(index, 1)
					arr.unshift(string)
				} else {
					arr.unshift(string)
				}
				return arr
			},
			// 清空
			delClick() {
				if (this.historyStorage.length === 0) {
					this.clickTimeNum ++ 
					this.message(this.clickTimeNum)
					return
				}
				this.clickTimeNum = 0
				this.historyStorage = []
				this.$refs['Message'].success('已清空历史记录')
			},
			message(num) {
				switch(num) {
					case 1 :
						this.$refs['Message'].info('好啦！已经清空啦')
					break
					case 2 :
						this.$refs['Message'].info('别玩啦，赶紧搜索影片走人吧')
					break
					case 3 :
						this.$refs['Message'].info('还来？我生气啦 (－＂－怒) ')
					break
					case 4 :
						this.$refs['Message'].info('(－＂－怒) (－＂－怒) (－＂－怒)')
					break
					default : 
						this.$refs['Message'].warn('我要去投诉你...呜呜 (*T_T*)')
					break 
				}
			},
			setHistryStorage() {
				uni.setStorage({
					key: 'history',
					data: this.historyStorage,
					success() {
						console.log('历史搜索记录保存成功')
					}
				})
			},
			// 获取数据
			async getvideoDataList() {
				this.$refs.auiLoading.show()
				this.scrollTop = 0
				const { data: res } = await this.$http({
					url: this.$api.search,
					method: 'GET',
					data: {
						...this.params,
						vodName: this.searchContent
					}
				})
				if (res.status !== 200) {
					this.$refs.auiLoading.hide()
					this.$refs['Message'].warn('没有找到资源')
					return
				}
				
				if(res.data.result.length === 0) {
					this.$refs.auiLoading.hide()
					this.hasMore = false
					return
				}
				
				
				// 数组拼接
				this.videoData = [...this.videoData, ...res.data.result]
				this.$refs.auiLoading.hide()
			},
			historyItemClick(item) {
				this.searchContent = item
				this.temporary = item
				this.getvideoDataList()
			},
			// 下拉触底
			handleToLower() {
				// 修改参数 skip += limit
				if (this.hasMore) {
					this.params.skip += this.params.limit
					this.getvideoDataList()
				} else {
					
					this.$refs['Message'].info('没有更多数据了')
				}
			},
			videoItemClick(item) {
				this.$goto('/pages/player/player', item)
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			backToTheTop() {
				this.scrollTop = this.old.scrollTop
				this.scrollTop = 0
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #f5f5f5;
	}
	.header {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 150rpx;
		background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
		
		.statusBar {
			width: 100%;
		}
		
		.serachview {
			display: flex;
			align-items: center;
			width: 100%;
			height: 70rpx;
			box-sizing: border-box;
			
			view {
				background-color: rgba(255, 255, 255, 0.3);
				margin-right: 20rpx;
				border-radius: 50px;
				color: #fff;
			}
			
			.back {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 64rpx;
				height: 64rpx;
				margin-left: 10rpx;
				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
			
			.search {
				flex: 5;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 70rpx;
				margin-left: 20rpx;
				box-sizing: border-box;
				.iconfont {
					font-size: 20px;
					margin: 0 30rpx 0 30rpx
				}
				text {
					color: #f5f5f5;
				}
			}
			
			.record {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 70rpx;
				padding: 0 30rpx;
				.iconfont {
					font-size: 20px;
					margin: 0 5rpx 0 0;
				}
				
				
			}
		}
	}
	
	.history {
		width: 100%;
		padding: 20rpx 20rpx 0rpx 20rpx;
		background-color: #ffffff;
		box-sizing: border-box;
		.historyTitle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 64rpx;
			text {
				color: #706b6f;
			}
			.delImg {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 64rpx;
				height: 64rpx;
				background-color: #EA5455;
				border-radius: 10rpx;
				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
	
	.historyItem {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		
		.item {
			min-width: 120rpx;
			height: 50rpx;
			padding: 10rpx;
			margin: 8rpx;
			text-align: center;
			background-image: linear-gradient( 135deg, #90F7EC 10%, #32CCBC 100%);
			border-radius: 10rpx;
			color: #ffffff;
		}
	}
	
	.videoContent {
		width: 100%;
		padding: 10rpx 20rpx 0rpx 20rpx;
		box-sizing: border-box;
		
		.item {
			display: flex;
			width: 100%;
			height: 250rpx;
			background-color: #ffffff;
			border-radius: 5px;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			transition: all 1s ease 0s;
			.img {
				width: 200rpx;
				height: 100%;
				box-shadow: 4px 4px 4px #ccc;
				image {
					width: 100%;
					height: 100%;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
					
				}
			}
			
			.itemcontent {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20rpx;
				
				.h1 {
					font-size: 20px;
					font-weight: bold;
					text-shadow: 4px 4px 4px #ccc;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				
				.txt {
					color: #706b6f;
				}
				
				.classify {
					display: flex;
					
					text {
						padding: 10rpx;
						margin-right: 8rpx;
						text-align: center;
						background-color: #f9f1f9;
						border-radius: 10rpx;
						color: #706b6f;
					}
				}
				
				.vod_blurb {
					font-size: 12px;
					color: #706b6f;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
		}
		
	}
	.place {
		color: #fff;
	}
</style>
